<template>
  <el-card class='box-card'>
    <!-- 搜索行 -->
    <el-row>
      <el-form :inline='true' :model='formInline' class='demo-form-inline'>
        <el-form-item label='标签名称'>
          <el-input v-model='formInline.tagName'></el-input>
        </el-form-item>
        <el-form-item label='状态'>
          <el-select v-model='formInline.state' placeholder='请选择'>
            <el-option label='启用' value='shanghai'></el-option>
            <el-option label='禁用' value='beijing'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size='small'>清除</el-button>
          <el-button size='small' type='primary'>搜索</el-button
          >
          <el-button
            class='addSubject'
            type='success'
            size='small'
            icon='el-icon-edit'
            >新增学科</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 总数 -->
    <el-alert title='数据一共n条' type='info' show-icon> </el-alert>
    <!-- 列表 -->
    <el-table :data='tableData' style='width: 100%'>
      <el-table-column prop='id' label='序号'> </el-table-column>
      <el-table-column prop='subjectName' label='所属学科' width='180'>
      </el-table-column>
      <el-table-column prop='tagName' label='标签名称' width='140'>
      </el-table-column>
      <el-table-column prop='username' label='创建者' width='180'>
      </el-table-column>
      <el-table-column prop='addDate' label='创建日期' width='200'>
      </el-table-column>
      <el-table-column prop='state' label='状态' width='140'>
        <template slot-scope="scope">
          <el-switch v-model="scope.row.state" @change="stateChange(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop='ctrl' label='操作' width='250'>
        <template slot-scope='scope'>
          <el-button @click='handleClick(scope.row)' type='text' size='medium'
            >启用</el-button
          >
          <el-button type='text' size='medium'>修改</el-button>
          <el-button type='text' size='medium'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change='handleSizeChange'
      @current-change='handleCurrentChange'
      :current-page='tagList.page'
      :page-sizes='[10, 20, 30, 40]'
      :page-size='tagList.pagesize'
      layout='total, sizes, prev, pager, next, jumper'
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import { getTags } from '@/api/user'
export default {
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      formInline: {
        tagName: '',
        state: ''
      },
      tagList: {
        page: 1,
        pagesize: 10
      },
      tableData: [],
      total: 0
    }
  },
  created() {
    this.getTags()
  },
  methods: {
    async getTags() {
      try {
        const { data } = await getTags(this.tagList)
        this.tableData = data.items
        this.total = data.counts
      } catch (err) {
      }
    },
    handleSizeChange(newSize) {
      this.tagList.pagesize = newSize
      this.getTags()
    },
    handleCurrentChange(newPage) {
      this.tagList.page = newPage
      this.getTags()
    },
    stateChange(stateInfo) {
    }
  }
}
</script>

<style scoped lang='less'>
.box-card {
  background-color: #fff;
  .el-row {
    width: 100%;
    .el-form-item {
      display: inline-block;
      text-align: right;
      vertical-align: middle;
      font-size: 14px;
      color: #606266;
      line-height: 40px;
      padding: 0 12px 0 0;
      font-weight: 700;
      box-sizing: border-box;
    }
    .el-input {
      width: 188px;
      height: 32px;
      padding: 0 60px 0 0;
    }
    .addSubject {
      margin-left: 300px;
    }
  }
  .el-alert {
    margin: 15px 0;
  }
  .el-pagination {
    float: right;
    margin: 20px 30px;
  }
  .el-dropdown {
    width: 200px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #8492a6;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
}
</style>
